
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huodongyouxian"></use>
                    </svg>
                    <div class="name">活动优先</div>
                    <div class="fontclass">#icon-huodongyouxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jingxuanshichang"></use>
                    </svg>
                    <div class="name">精选市场</div>
                    <div class="fontclass">#icon-jingxuanshichang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuru"></use>
                    </svg>
                    <div class="name">输入</div>
                    <div class="fontclass">#icon-shuru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiwen"></use>
                    </svg>
                    <div class="name">天猫提示-疑问</div>
                    <div class="fontclass">#icon-yiwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chanpincanshu"></use>
                    </svg>
                    <div class="name">产品参数</div>
                    <div class="fontclass">#icon-chanpincanshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei1"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanzhudianpu"></use>
                    </svg>
                    <div class="name">关注店铺</div>
                    <div class="fontclass">#icon-guanzhudianpu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiguanzhu"></use>
                    </svg>
                    <div class="name">已关注</div>
                    <div class="fontclass">#icon-yiguanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianpu"></use>
                    </svg>
                    <div class="name">店铺</div>
                    <div class="fontclass">#icon-dianpu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanzhu"></use>
                    </svg>
                    <div class="name">关注</div>
                    <div class="fontclass">#icon-guanzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wo"></use>
                    </svg>
                    <div class="name">我</div>
                    <div class="fontclass">#icon-wo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan"></use>
                    </svg>
                    <div class="name">优惠券</div>
                    <div class="fontclass">#icon-youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoqing"></use>
                    </svg>
                    <div class="name">表情</div>
                    <div class="fontclass">#icon-biaoqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongnengjianyi"></use>
                    </svg>
                    <div class="name">功能建议</div>
                    <div class="fontclass">#icon-gongnengjianyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyipi"></use>
                    </svg>
                    <div class="name">换一批</div>
                    <div class="fontclass">#icon-huanyipi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengbo"></use>
                    </svg>
                    <div class="name">声波</div>
                    <div class="fontclass">#icon-shengbo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wentifankui"></use>
                    </svg>
                    <div class="name">问题反馈</div>
                    <div class="fontclass">#icon-wentifankui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinxi"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#icon-xinxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zan"></use>
                    </svg>
                    <div class="name">赞</div>
                    <div class="fontclass">#icon-zan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">#icon-pengyouquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinlang"></use>
                    </svg>
                    <div class="name">新浪</div>
                    <div class="fontclass">#icon-xinlang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-mima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lianjie"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#icon-lianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#icon-dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucangxuanzhong"></use>
                    </svg>
                    <div class="name">收藏-选中</div>
                    <div class="fontclass">#icon-shoucangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#icon-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fandouer"></use>
                    </svg>
                    <div class="name">范兜儿</div>
                    <div class="fontclass">#icon-fandouer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paixing"></use>
                    </svg>
                    <div class="name">排行</div>
                    <div class="fontclass">#icon-paixing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanyuwo"></use>
                    </svg>
                    <div class="name">关于我</div>
                    <div class="fontclass">#icon-guanyuwo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-bangzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jifen"></use>
                    </svg>
                    <div class="name">积分</div>
                    <div class="fontclass">#icon-jifen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongbao"></use>
                    </svg>
                    <div class="name">红包</div>
                    <div class="fontclass">#icon-hongbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuikuan"></use>
                    </svg>
                    <div class="name">退款</div>
                    <div class="fontclass">#icon-tuikuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuikuan1"></use>
                    </svg>
                    <div class="name">红包</div>
                    <div class="fontclass">#icon-tuikuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">Message</div>
                    <div class="fontclass">#icon-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang1"></use>
                    </svg>
                    <div class="name">share</div>
                    <div class="fontclass">#icon-fenxiang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart"></use>
                    </svg>
                    <div class="name">cart</div>
                    <div class="fontclass">#icon-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">home</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">Camera</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attention"></use>
                    </svg>
                    <div class="name">Attention</div>
                    <div class="fontclass">#icon-attention</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">refresh</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan2"></use>
                    </svg>
                    <div class="name">查看2</div>
                    <div class="fontclass">#icon-chakan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-jia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jian"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-jian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontscan"></use>
                    </svg>
                    <div class="name">扫码</div>
                    <div class="fontclass">#icon-iconfontscan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanbudingdan"></use>
                    </svg>
                    <div class="name">全部订单</div>
                    <div class="fontclass">#icon-quanbudingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodezichan"></use>
                    </svg>
                    <div class="name">我的资产</div>
                    <div class="fontclass">#icon-wodezichan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shoucangxuanzhong"></use>
                    </svg>
                    <div class="name">3.1收藏-选中</div>
                    <div class="fontclass">#icon-31shoucangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shoucang"></use>
                    </svg>
                    <div class="name">3.1收藏</div>
                    <div class="fontclass">#icon-31shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31guanbi"></use>
                    </svg>
                    <div class="name">3.1关闭</div>
                    <div class="fontclass">#icon-31guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31xuanze"></use>
                    </svg>
                    <div class="name">3.1选择</div>
                    <div class="fontclass">#icon-31xuanze</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31guanzhudianpu"></use>
                    </svg>
                    <div class="name">3.1关注店铺</div>
                    <div class="fontclass">#icon-31guanzhudianpu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31xuanzhong"></use>
                    </svg>
                    <div class="name">3.1选中</div>
                    <div class="fontclass">#icon-31xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31yiguanzhudianpu"></use>
                    </svg>
                    <div class="name">3.1已关注店铺</div>
                    <div class="fontclass">#icon-31yiguanzhudianpu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31dianzan"></use>
                    </svg>
                    <div class="name">3.1点赞</div>
                    <div class="fontclass">#icon-31dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31dianpu"></use>
                    </svg>
                    <div class="name">3.1店铺</div>
                    <div class="fontclass">#icon-31dianpu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31fenxiang"></use>
                    </svg>
                    <div class="name">3.1分享</div>
                    <div class="fontclass">#icon-31fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31zhuanfa"></use>
                    </svg>
                    <div class="name">3.1转发</div>
                    <div class="fontclass">#icon-31zhuanfa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31daifahuo"></use>
                    </svg>
                    <div class="name">3.1待发货</div>
                    <div class="fontclass">#icon-31daifahuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31daifukuan"></use>
                    </svg>
                    <div class="name">3.1待付款</div>
                    <div class="fontclass">#icon-31daifukuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31daishouhuo"></use>
                    </svg>
                    <div class="name">3.1待收货</div>
                    <div class="fontclass">#icon-31daishouhuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31daipingjia"></use>
                    </svg>
                    <div class="name">3.1待评价</div>
                    <div class="fontclass">#icon-31daipingjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuikuantuihuo"></use>
                    </svg>
                    <div class="name">3.1退款退货</div>
                    <div class="fontclass">#icon-tuikuantuihuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31huiyuanqia"></use>
                    </svg>
                    <div class="name">3.1会员卡</div>
                    <div class="fontclass">#icon-31huiyuanqia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31jifen"></use>
                    </svg>
                    <div class="name">3.1积分</div>
                    <div class="fontclass">#icon-31jifen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31youhuiquan"></use>
                    </svg>
                    <div class="name">3.1优惠券</div>
                    <div class="fontclass">#icon-31youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shouyexuanzhong"></use>
                    </svg>
                    <div class="name">3.1首页-选中</div>
                    <div class="fontclass">#icon-31shouyexuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwuhuodong"></use>
                    </svg>
                    <div class="name">礼物 活动</div>
                    <div class="fontclass">#icon-liwuhuodong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31fandou"></use>
                    </svg>
                    <div class="name">3.1-范兜</div>
                    <div class="fontclass">#icon-31fandou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31jiancai"></use>
                    </svg>
                    <div class="name">3.1-剪裁</div>
                    <div class="fontclass">#icon-31jiancai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan1"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanzhu1"></use>
                    </svg>
                    <div class="name">关注</div>
                    <div class="fontclass">#icon-guanzhu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huore"></use>
                    </svg>
                    <div class="name">火热</div>
                    <div class="fontclass">#icon-huore</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laba"></use>
                    </svg>
                    <div class="name">喇叭</div>
                    <div class="fontclass">#icon-laba</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lingdang"></use>
                    </svg>
                    <div class="name">3.1铃铛</div>
                    <div class="fontclass">#icon-lingdang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31qichejinrong"></use>
                    </svg>
                    <div class="name">3.1-汽车金融</div>
                    <div class="fontclass">#icon-31qichejinrong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31rexiao"></use>
                    </svg>
                    <div class="name">3.1-热销</div>
                    <div class="fontclass">#icon-31rexiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shuaxin"></use>
                    </svg>
                    <div class="name">3.1-刷新</div>
                    <div class="fontclass">#icon-31shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31xiaoxi"></use>
                    </svg>
                    <div class="name">3.1-消息</div>
                    <div class="fontclass">#icon-31xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31yiwen"></use>
                    </svg>
                    <div class="name">3.1-疑问</div>
                    <div class="fontclass">#icon-31yiwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31chanpincanshu"></use>
                    </svg>
                    <div class="name">3.1产品参数</div>
                    <div class="fontclass">#icon-31chanpincanshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31dingdan"></use>
                    </svg>
                    <div class="name">3.1订单</div>
                    <div class="fontclass">#icon-31dingdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31dingwei"></use>
                    </svg>
                    <div class="name">3.1定位</div>
                    <div class="fontclass">#icon-31dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shanchu"></use>
                    </svg>
                    <div class="name">3.1删除</div>
                    <div class="fontclass">#icon-31shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31zuji"></use>
                    </svg>
                    <div class="name">3.1足迹</div>
                    <div class="fontclass">#icon-31zuji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31hongbao"></use>
                    </svg>
                    <div class="name">3.1优惠券</div>
                    <div class="fontclass">#icon-31hongbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31leimu"></use>
                    </svg>
                    <div class="name">3.1类目</div>
                    <div class="fontclass">#icon-31leimu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                    <div class="name">3.1列表</div>
                    <div class="fontclass">#icon-31liebiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31tuwenxiangqing"></use>
                    </svg>
                    <div class="name">3.1图文详情</div>
                    <div class="fontclass">#icon-31tuwenxiangqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31baocundaozhuomian"></use>
                    </svg>
                    <div class="name">3.1 保存到桌面</div>
                    <div class="fontclass">#icon-31baocundaozhuomian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31erweima"></use>
                    </svg>
                    <div class="name">3.1 二维码</div>
                    <div class="fontclass">#icon-31erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31pinglun"></use>
                    </svg>
                    <div class="name">3.1 评论</div>
                    <div class="fontclass">#icon-31pinglun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31qiandao"></use>
                    </svg>
                    <div class="name">3.1 签到</div>
                    <div class="fontclass">#icon-31qiandao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31quanbushangpin"></use>
                    </svg>
                    <div class="name">3.1 全部商品</div>
                    <div class="fontclass">#icon-31quanbushangpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shezhi"></use>
                    </svg>
                    <div class="name">3.1 设置</div>
                    <div class="fontclass">#icon-31shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31tishi"></use>
                    </svg>
                    <div class="name">3.1提示</div>
                    <div class="fontclass">#icon-31tishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31qichejinrong1"></use>
                    </svg>
                    <div class="name">3.1-汽车金融</div>
                    <div class="fontclass">#icon-31qichejinrong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31haoyou"></use>
                    </svg>
                    <div class="name">3.1 好友</div>
                    <div class="fontclass">#icon-31haoyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingyue"></use>
                    </svg>
                    <div class="name">3.1-订阅</div>
                    <div class="fontclass">#icon-dingyue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouhoufuwu"></use>
                    </svg>
                    <div class="name">售后服务</div>
                    <div class="fontclass">#icon-shouhoufuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31aichegujia"></use>
                    </svg>
                    <div class="name">3.1-爱车估价</div>
                    <div class="fontclass">#icon-31aichegujia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31dapei"></use>
                    </svg>
                    <div class="name">3.1-搭配</div>
                    <div class="fontclass">#icon-31dapei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31moda"></use>
                    </svg>
                    <div class="name">3.1-魔搭</div>
                    <div class="fontclass">#icon-31moda</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31paixingbang"></use>
                    </svg>
                    <div class="name">3.1-排行榜</div>
                    <div class="fontclass">#icon-31paixingbang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31weizhangkuaicha"></use>
                    </svg>
                    <div class="name">3.1-违章快查</div>
                    <div class="fontclass">#icon-31weizhangkuaicha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31pinpai"></use>
                    </svg>
                    <div class="name">3.1-品牌</div>
                    <div class="fontclass">#icon-31pinpai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                    <div class="name">3.1-客服</div>
                    <div class="fontclass">#icon-kefu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tamenduyongguo"></use>
                    </svg>
                    <div class="name">他们都用过</div>
                    <div class="fontclass">#icon-tamenduyongguo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianmaoguojizhekoubiao"></use>
                    </svg>
                    <div class="name">天猫国际-折扣标.</div>
                    <div class="fontclass">#icon-tianmaoguojizhekoubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao"></use>
                    </svg>
                    <div class="name">支付宝</div>
                    <div class="fontclass">#icon-zhifubao</div>
                </li>

        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
